<template lang="pug">
  .foot-menu.clearfix.animated.bounceInUp(
    v-if="getMenuStatus",
    ref="footWrap",
    :class="{'active': getMenuStyleObj}",
    @touchmove="handleDragPrevent")
    Scene
    .foot-menu-ulall
      ul.foot-menu-list.menu-custom
        li.menu-item.omit(@click="showScene")
          span.menu-icon(:style="getBgColorStyle")
            i.iconfont.icon-scene(:style="getColorStyle")
          p.menu-text.omit(:style="getColorStyle") 场景

        li.menu-item.omit(@click="handleSettings")
          span.menu-icon(:style="getBgColorStyle")
            i.iconfont.icon-settings(:style="getColorStyle")
          p.menu-text.omit(:style="getColorStyle") 操作
      ul.foot-menu-list.menu-custom
        li.menu-item.omit(
          v-for="(item, index) in getBottomMenu",
          :key="index",
          :content="item.isActive ? item.act_title : item.dis_title",
          @click="handleBtMenu(item)")
          span.menu-icon(:style="getBgColorStyle")
            i.iconfont(v-if="item.isActive", :class="item.active_icon", :style="getColorStyle")
            i.iconfont(v-else, :class="item.icon", :style="getColorStyle")
          p.menu-text.omit(:style="getColorStyle") {{item.title}}

        //- li.menu-item.omit(@click="handlePerspective")
        //-   span.menu-icon(:style="getBgColorStyle")
        //-     i.iconfont.icon-view(:style="getColorStyle")
        //-   p.menu-text.omit(:style="getColorStyle") 视角

    van-action-sheet(v-model="sheets", :actions="actions", @cancel="sheetCancel", cancel-text="取消")
</template>

<script>
import themeMixin from '@/mixins/theme'
import menuMixin from '@/mixins/menu'
import Scene from 'Comps/Scene/app/scene-ct'

import {
  filterMenu,
  handleCustomMenu,
  handleSystemMenu
} from '@/utils/menu'
import { mapGetters } from 'vuex'

export default {
  name: 'menuBar',
  mixins: [themeMixin, menuMixin],
  mounted() {
    setTimeout(async () => {
      const menu  =  await filterMenu(this.$CONFIG.defMenu)
      this.menuDataList = menu
    }, 1000)
  },
  methods: {
    // 自定义底部菜单
    handleBtMenu(item) {
      handleCustomMenu(item)
      this.sheetCancel()
    },
    handleSettings() {
      this.formatActions(this.menuDataList, this.handleSytemMenuItem)
      this.handleSheet()
    },
    // 系统菜单
    handleSytemMenuItem(item) {
      this.sheetCancel()
      handleSystemMenu(item)
    }
  },
  components: {
    Scene
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/mixin.styl'
$white = #fff
$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff
.theme-app-b
  .foot-menu
    .foot-menu-ulall
      display flex
      justify-content space-between
      .foot-menu-list
        // flex-cnter()
        display flex
        padding: 10px 0
        box-sizing: border-box
        color: $white
        .menu-item
          flex: 1
          max-width: 46px
          align-self: center
          display: inline-block
          text-align: center
          cursor: pointer
          .menu-text
            font-size: 10px
            margin-top: 5px
          .menu-icon
            display: inline-block
            width: 28px
            height: 28px
            line-height: 28px
            border-radius: 50%
            transition: all 1s
            background-color: $white
            i
              vertical-align: middle
              color: $theme-classic-color
      .foot-menu-list:nth-child(1)
        width 20%
        justify-content flex-start
      .foot-menu-list:nth-child(2)
        width 80%
        justify-content flex-end
</style>
